<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Splitter | Onsen UI</title>
  <link rel="stylesheet" href="../../build/css/onsenui.css">
  <link rel="stylesheet" href="../../build/css/onsen-css-components.css">

  <script src="../../build/js/onsenui.js"></script>

  <style>
    ons-splitter-side[side="left"]:not([animation=reveal]) {
      border-right: 1px solid #ddd;
    }

    ons-splitter-side[side="right"]:not([animation=reveal]) {
      border-left: 1px solid #ddd;
    }
  </style>

  <script>
    function toggle(side) {
      var side = document.querySelector('ons-splitter-side[side="' + side + '"]');

      side.toggle();
    }

    function changeAnimation(animationName) {
      var leftSide = document.querySelector('ons-splitter-side[side="left"]');
      var rightSide = document.querySelector('ons-splitter-side[side="right"]');

      if (animationName) {
        leftSide.setAttribute('animation', animationName);
        rightSide.setAttribute('animation', animationName);
      } else {
        leftSide.removeAttribute('animation'); // Caution: setAttribute(~~~~, null) sets the string value 'null'
        rightSide.removeAttribute('animation');
      }
    }
  </script>

</head>

<body>

  <ons-splitter>
    <ons-splitter-side side="left" width="200px" collapse="portrait" swipeable>
      <ons-page>
        <ons-toolbar>
          <div class="center">content</div>
        </ons-toolbar>

      </ons-page>
    </ons-splitter-side>

    <ons-splitter-content>
      <ons-page>
        <ons-toolbar>
          <div class="center">ons-splitter-content</div>
        </ons-toolbar>

        <p style="padding: 10px 20px;">
          <ons-button onclick="toggle('left')">toggle left menu</ons-button>
        </p>

        <p style="padding: 10px 20px;">
          <ons-button onclick="toggle('right')">toggle right menu</ons-button>
        </p>

        <p style="padding: 10px 20px;">
          Change animation:
          <ons-button onclick="changeAnimation()">no 'animation' attribute</ons-button>
          <ons-button onclick="changeAnimation('default')">'default'</ons-button>
          <ons-button onclick="changeAnimation('overlay')">'overlay'</ons-button>
          <ons-button onclick="changeAnimation('push')">'push'</ons-button>
          <ons-button onclick="changeAnimation('reveal')">'reveal'</ons-button>
        </p>

      </ons-page>
    </ons-splitter-content>

    <ons-splitter-side side="right" width="300px" collapse swipeable open-threshold="0.4">
      <ons-page>
        <ons-toolbar>
          <div class="left">
            <ons-toolbar-button onclick="toggle('right')">Close</ons-toolbar-button>
          </div>
          <div class="center">ons-splitter-side</div>
        </ons-toolbar>

      </ons-page>
    </ons-splitter-side>
  </ons-splitter>

</body>
</html>
